/*
选择用户头像的UI组件
 */

// import React, { Component } from 'react'
// import { List, Grid } from 'antd-mobile'
// import PropTypes from 'prop-types'

// export default class HeaderSelector extends Component {
//   static propTypes = {
//     setHeader: PropTypes.func.isRequired
//   }

//   state = {
//     icon: null //图片对象, 默认没有值
//   }

//   constructor(props) {
//     super(props)
//     // 准备需要显示的列表数据
//     this.headerList = []
//     // for (let i = 0; i < 20; i++) {
//     //   this.headerList.push({
//     //     text: '头像'+(i+1),
//     //     icon: require(`../../assets/images/头像${i+1}.png`) // 不能使用import
//     //   })
//     // }

//     const files = require.context('../../assets/images', true, /\.png$/)
//     files.keys().forEach(key => {
//       let name = key.replace('./', '').replace('.png', '')
//       this.headerList.push({
//         text: name,
//         icon: require(`../../assets/images/${name}.png`)
//       })
//     })
//   }

//   handleClick = ({ text, icon }) => {
//     // 更新当前组件状态
//     this.setState({ icon })
//     // 调用函数更新父组件状态
//     this.props.setHeader(text)
//   }

//   render() {
//     // 头部界面
//     const { icon } = this.state
//     const listHeader = !icon ? (
//       '请选择头像'
//     ) : (
//       <div>
//         已选择头像:
//         <img src={icon} alt="" />
//       </div>
//     )

//     return (
//       <List renderHeader={() => listHeader}>
//         <Grid data={this.headerList} columnNum={5} onClick={this.handleClick} />
//       </List>
//     )
//   }
// }

import React, { Component } from 'react'
import { List, Grid } from 'antd-mobile'
import PropTypes from 'prop-types'

export default class HeaderSelector extends Component {
  static propTypes = {
    setHeader: PropTypes.func.isRequired
  }

  state = {
    icon: null
  }

  constructor(props) {
    super(props)

    this.headerList = []

    const files = require.context('../../assets/images', true, /\.png$/)

    files.keys().forEach(key => {
      let name = key.replace('./', '').replace('.png', '')
      this.headerList.push({
        text: name,
        icon: require(`../../assets/images/${name}.png`)
      })
    })
  }

  handleClick = ({ text, icon }) => {
    this.setState({ icon })
    this.props.setHeader(text)
  }

  render() {
    const { icon } = this.state
    const listHeader = !icon ? (
      'please choose avatar'
    ) : (
      <div>
        chosen:<img src={icon} alt=""></img>
      </div>
    )

    return (
      <List renderHeader={() => listHeader}>
        <Grid
          data={this.headerList}
          columnNum={5}
          onClick={this.handleClick}></Grid>
      </List>
    )
  }
}
